

<title>选课-培养方案</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>选课</cite></a>
        <a><cite>课表</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-page" lay-filter="test"></table>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">人数</div>
                <div style="width: 100%; height:475px" id="my-class-list-person"></div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">课表</div>
                <div class="layui-card-body" id="my-class-list">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarlist">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input id="usercode" type="text" placeholder="搜索学号.." autocomplete="off" class="layui-input" lay-event="serach">
        </div>
    </div>
</script>

<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="getcoin"><i class="layui-icon layui-icon-dollar"></i>权重</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script>
    layui.use(['jquery', 'table', 'echarts'], function(){
        var $ = layui.$, table = layui.table,
            echarts = layui.echarts, admin = layui.admin,
            view = layui.view, form = layui.form;

        function getStatus(status) {
            if (status === "预选中" ) {
                return "<span style=\"color: #5FB878;\">预选中</span>";
            }else if (status === "选中") {
                return "<span style=\"color: #5FB878;\">选中</span>";
            } else if (status === "未选中") {
                return "<span style=\"color: #c23f34;\">未选中</span>";
            }else {
                return "<span style=\"color: #4a95ff\">" + status + "</span>";
            }
        }

        function getRadioStatus(status) {
            if (status) {
                return "<input type=\"checkbox\" disabled checked lay-skin=\"switch\" lay-text=\"是|否\">"
            }else {
                return "<input type=\"checkbox\" disabled lay-skin=\"switch\" lay-text=\"是|否\">";
            }
        }

        function index(usercode) {
            table.render({
                elem: '#test-table-page'
                ,url: "/uclass/admin/elective/userclasses?usercode=" + usercode
                ,toolbar: "#toolbarlist"
                ,cols: [[
                    {field:'courseName', minWidth:150, title:'课程', align:'left'}
                    ,{field:'campus',  minWidth:90, title:'校区', align:'left'}
                    ,{field: 'teacher', minWidth:80, title:'教师', align:'left'}
                    ,{field: 'credit', title:'学分', align:'left'}
                    ,{field: 'coins', title: '投币', align:'left'}
                    ,{field: 'status', minWidth:80, title: '状态', align:'left', templet:function (d) {return getStatus(d.status)}}
                    ,{field: 'buyBook', minWidth:90, title: '购书', templet: function (d) { return getRadioStatus(d.buyBook); }}
                    ,{field: 'adjust', minWidth:90, title: '调剂', templet: function (d) { return getRadioStatus(d.adjust); }}
                    ,{field: 'retake', minWidth:90, title: '重修', templet: function (d) { return getRadioStatus(d.retake); }}
                    ,{field: 'remark', minWidth:100, title: '备注', align: 'left'}
                    ,{align:'center', minWidth:220, title:'操作', toolbar:'#lineBar'}
                ]]
                ,parseData: function(res) {
                    drawPersonNum(res.data.classInfoList);
                    getHtmlTable(usercode);
                    bindSearchUser();
                    return {
                        "status": res.status,
                        "message": res.message,
                        "data": res.data.classList
                    };
                }
                ,response: {
                    statusName: 'status'
                    ,statusCode: 200
                    ,msgName: 'message'
                    ,dataName: 'data'
                }
                ,done: function (){
                    listenTool();
                }
            });
        }

        function getHtmlTable(usercode) {
            // 获取table原始类型课表
            $.ajax({
                url: "/uclass/admin/elective/userhtmlclasses?usercode=" + usercode,
                dataType: 'json',
                complete: function (result) {
                    result = result.responseJSON;
                    if (result.status === 200) {
                        var html = result.data;
                        var content = html.replace(/<a href="javascript:void\(0\);" class="choice">选课<\/a>/g, "");
                        content = content.replace(/onclick='labClick\(this\)'/g, "");
                        content = content.replace("../css/Form.css", "");
                        $('#my-class-list').empty();
                        $('#my-class-list').append(content);
                    } else {
                        layer.msg(result.message);
                    }
                }
            });
        }

        // 人数画图
        function drawPersonNum(classinfos) {
            var classlist = [];
            var limitNums = [];
            var nowNums = [];
            var determineNums = [];

            classinfos.forEach(function (classinfo) {
                classlist.push(classinfo.className);
                limitNums.push(classinfo.limitNum);
                nowNums.push(classinfo.nowNum);
                determineNums.push(classinfo.determineNum);
            });

            // 根据数量判断变成折线图还是柱状图
            var type = "line";
            if (classinfos.length <= 10) {
                type = "bar";
            }

            // 是否有滑动条,以及显示多少数据
            var len = 100;
            var slide = false;
            if (classinfos.length >= 20) {
                slide = true;
                len = parseInt(20 / classinfos.length * 100);
            }
            var personData = {
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    type: "scroll",
                    data: ["限选", "已选", "确定"]
                },
                xAxis: [{
                    type: "category",
                    boundaryGap: true,
                    axisLabel : {
                        interval:0,
                        rotate:20,
                        formatter : function(params){
                            if (params.length > 11) {
                                return params.substr(0, 10) + ".."
                            }
                            return params;
                        }

                    },
                    data: classlist
                }],
                yAxis: [{
                    type: "value"
                }],
                series: [{
                    name: "限选",
                    type: type,
                    barMaxWidth:30,
                    smooth: !0,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: "default"
                            }
                        }
                    },
                    data: limitNums
                }, {
                    name: "已选",
                    type: type,
                    barMaxWidth:30,
                    smooth: !0,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: "default"
                            }
                        }
                    },
                    data: nowNums
                },{
                    name: "确定",
                    type: type,
                    barMaxWidth:30,
                    smooth: !0,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: "default"
                            }
                        }
                    },
                    data: determineNums
                }],
                dataZoom:{
                    type: 'slider',
                    show: slide,
                    height:10,//滚动条高度
                    start:0,//滚动条开始位置（共100等份）
                    end: len//结束位置（共100等份）
                }
            };
            var card= document.getElementById('my-class-list-person');
            var myChart = echarts.init(card, layui.echartsTheme);
            myChart.setOption(personData);
            myChart.resize();
        }

        function bindSearchUser() {
            $('#usercode').bind('keypress', function (event) {
                if (event.keyCode === 13) {
                    var usercode = $('#usercode').val();
                    if (usercode !== "" && usercode !== undefined && usercode !== null) {
                        index(usercode);
                    }
                }
            });
        }

        // 监听行工具条
        function listenTool() {
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'getcoin':
                        window.location.href = "/uclass/admin/index#/menu/elective/classuser#?classNum=" + data.classNum;
                        break;
                    case 'edit':
                        modifyClass(data);
                        break;
                    case 'del':
                        delClass(data);
                        break;
                }
            });
        }

        // 删除课程
        function delClass(data) {
            layer.confirm('确认删除' + data.courseName, function(index){
                var content = {};
                content['classCode'] = data.classCode;
                content['classNum'] = data.classNum;
                var load = layer.load(2);
                $.ajax({
                    url: '/uclass/elective/delete',
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: content,
                    dataType: 'json',
                    complete: function (result) {
                        layer.close(load);
                        result = result.responseJSON;
                        if (result.status === 200) {
                            layui.index.render();
                        } else {
                            layer.msg(result.message);
                        }
                    }
                });
                layer.close(index);
            });
        }

        // 编辑课程
        function modifyClass(data) {
            admin.popup({
                title: "选课",
                area: ["420px", window.screen.availHeight * 0.9 + "px"],
                id: "LAY-popup-user-elective-confirm",
                success: function(layero, index) {
                    view(this.id).render("menu/elective/modifyClass", data).done(function () {
                        form.verify({
                            validCoinNum: function (value, item) {
                                var rest = $('#restCoin')[0].textContent;
                                rest = parseInt(rest);
                                if (value > rest) return "投币超出余额";
                            }
                        });
                        form.render();
                        $.ajax({
                            url: "/uclass/elective/coininfo",
                            dataType: 'json',
                            complete: function (result) {
                                result = result.responseJSON;
                                var restCoin = result.data.rest;
                                var rest = parseInt(restCoin) + parseInt(data.coins);
                                $('#restCoin').append(rest);
                            }
                        });

                        form.on("submit(LAY-user-back-submit)",function (formData) {
                            layer.close(index);
                            var load = layer.load(2);
                            var field = formData.field;
                            var content = {};
                            content['classCode'] = data.classCode;
                            content['classNum'] = data.classNum;
                            content['coin'] = field['coin'];
                            if (field.hasOwnProperty("buy")) {content['buy'] = true}
                            else {content['buy'] = false};
                            if (field.hasOwnProperty("retake")) {content['retake'] = true}
                            else {content['retake'] = false};
                            if (field.hasOwnProperty("adjust")) {content['adjust'] = true}
                            else {content['adjust'] = false};
                            $.ajax({
                                url: '/uclass/elective/modify',
                                type: 'POST',
                                contentType: 'application/json',
                                data: JSON.stringify(content),
                                dataType: 'json',
                                complete: function (result) {
                                    layer.close(load);
                                    result = result.responseJSON;
                                    if (result.status === 200) {
                                        layer.msg("修改成功");
                                    }else {
                                        layer.msg(result.message);
                                    }
                                }
                            })
                        });
                    });
                }
            });
        }

        index("");


    });
</script>